<template>
    <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>

require('echarts/theme/macarons') // echarts theme

export default {
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        chartData: {
            type: Array,
            required: true
        },
        xAxisData: {
            type: Array,
            required: false
        },
        // 标题
        title: {
            type: String,
            required: false
        },
        // 默认展示几个点
        showSize: {
            type: Number,
            default: 5,
            required: false
        }
    },
    data() {
        return {
            chart: null,
            echartsDataList: [],
            echartsLegendList: [],
            showLegend: {}
        }
    },
    // watch: {
    //     chartData: {
    //         deep: true,
    //         handler(val) {
    //             this.setOptions(val)
    //         }
    //     }
    // },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {

        initChart() {

            this.chart = this.$echarts.init(this.$el, 'macarons')

            // console.log('chartData', this.chartData)
            // console.log('xAxisData', this.xAxisData)
            // let dataMap = this.chartData.dataMap

            let i = 0

            let length = this.chartData.length

            for (let j = 0; j < length; j++) {

                i++

                let name = this.chartData[j]['name']
                let data = this.chartData[j]['data']

                this.echartsDataList.push({
                    name: name,
                    type: 'line',
                    smooth: true,
                    data: data,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                // 设置线条粗细
                                width: 1
                            }
                        }
                    }
                })
                this.echartsLegendList.push(name)

                // this.showLegend[name] = true
                this.showLegend[name] = i <= this.showSize

            }

            // console.log(this.echartsDataList)
            // console.log(this.echartsLegendList)

            // this.chartData.echartsDataList = this.echartsLegendList
            // this.chartData.echartsLegendList = this.echartsLegendList

            // console.log(this.chartData);
            // this.setOptions(this.chartData)

            this.chart.showLoading({
                text: '加载中',
                color: '#008ACD',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0.2)',
                zlevel: 0
            })

            setTimeout(() => {
                // setOption前隐藏loading事件
                this.chart.hideLoading()
                this.setOptions(this.xAxisData, this.title, this.echartsLegendList, this.echartsDataList, this.showLegend)
            }, 1000)

        },

        setOptions(xAxisData, title, echartsLegendList, series, showLegend) {

            this.chart.setOption({
                title: [
                    {
                        top: '-1%',
                        // text: title,
                        textStyle: {
                            fontFamily: 'Arial',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'bold',
                            color: '#000000'
                        }
                    }],
                xAxis: {
                    data: xAxisData,
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    // axisLabel: {
                    //     interval: 0,
                    //     rotate: 40
                    // }
                },
                // 滑动条
                dataZoom: [
                    {
                        // 这里是从X轴的0刻度开始
                        xAxisIndex: 0,
                        // 是否显示滑动条，不影响使用
                        show: true,
                        // 在内部可以左右拖动
                        // type: 'inside',
                        type: 'slider',
                        // 从头开始
                        startValue: 0,
                        // 一次性展示10个
                        endValue: 10
                    }
                ],
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10]
                },
                yAxis: {
                    axisTick: {
                        show: false
                    }
                },
                legend: {
                    data: echartsLegendList,
                    selected: showLegend
                },
                series: series
            })
        }
    }
}
</script>
